<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>旋转五角星</title>
    <script type="text/javascript" charset="utf-8">
        window.onload = function() {
            var canvas = document.createElement('canvas');
            canvas.width = 600;
            canvas.height = 600;
            document.body.appendChild(canvas);
            var context = canvas.getContext("2d");
            //设置边框样式以及填充颜色  
            context.lineWidth = 1;
            context.fillStyle = "red";
            context.strokeStyle = "red";

            /* @length: 边长，逐渐变大  
             * @offset: 偏移位置，逐渐变大  
             * @offsetX: 横轴额外偏移，根据角度计算  
             * @offsetY: 竖轴额外偏移，根据角度计算  
             * @degree: 旋转角度，每次变化18度  
             */
            var length = 2,
                offset = 5,
                degree = 0;
            var halfWidth = canvas.width / 2,
                halfHeight = canvas.height / 2;

            var timer = setInterval(function() {
                if (degree < -1200) {
                    clearInterval(timer);
                    return false;
                }
                length *= 1.05;
                offset *= 1.06;
                offsetX = offset * Math.cos(degree / 180 * Math.PI);
                offsetY = offset * Math.sin(degree / 180 * Math.PI)
                degree -= 18;
                context.beginPath();
                //设置是个顶点的坐标，根据顶点制定路径  
                for (var i = 0; i < 5; i++) {
                    context.lineTo(Math.cos((degree + i * 72) / 180 * Math.PI) * length + offsetX + halfWidth, -Math.sin((degree + i * 72) / 180 * Math.PI) * length + offsetY + halfHeight);
                    context.lineTo(Math.cos((degree + 36 + i * 72) / 180 * Math.PI) * length * 0.4 + offsetX + halfWidth, -Math.sin((degree + 36 + i * 72) / 180 * Math.PI) * length * 0.4 + offsetY + halfHeight);
                }
                context.closePath();
                context.fill();
                context.stroke();
            }, 100);
        }
    </script>
</head>

<body></body>

</html>